<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html,
        body {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .left {
            width: 250px;
            height: 100%;
        }

        .left aside {
            width: 100%;
            height: 100%;
            color: gainsboro;
            padding: 10px;
            background-color: #353942;
        }

        .left aside p {
            height: 40px;
            padding: 10px 15px;
            border-radius: 5px;
        }

        .left aside .active-blue {
            color: white;
            background-color: rgb(0, 123, 255);
        }

        .left aside .active-white {
            color: black;
            background-color: white;
        }

        .right {
            width: 100%;
            overflow-y: scroll;
            background-color: #f5f6fa;
        }

        .right nav {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            line-height: 50px;
            background-color: white;
        }

        /* .right nav .nav-left {} */

        .right nav .nav-right {
            display: flex;
        }

        .right .bigname {
            height: 70px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            line-height: 70px;
        }

        .right .bigname p:nth-child(1) span {
            font-size: 25px;
        }

        .right .bigname p:nth-child(2) span {
            font-size: 15px;
        }

        .right main {
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .right main .echarts-1,
        .echarts-2,
        .echarts-3,
        .echarts-4 {
            width: 49%;
            height: 400px;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid gainsboro;
            border-radius: 5px;
            background-color: white;
        }
        .right main .echarts-3 p{
            display: flex;
            justify-content: space-between;
        }
        .right main .echarts-3 p span:nth-child(1){
            flex: 1;
            font-size: 25px;
            margin-bottom: 10px;
        }
        .right main .echarts-3 table{
            width: 100%;
            text-align: left;
        }
        .right main .echarts-3 table tr{
            height: 50px;
        }
        .right main .echarts-3 table tbody tr:nth-child(1){
            background-color: #f5f6fa;
        }
        .right main .echarts-4 p{
            display: flex;
            justify-content: space-between;
        }
        .right main .echarts-4 p:nth-child(1) span:nth-child(1){
            flex: 1;
            font-size: 25px;
            margin-bottom: 30px;
        }
        .right main .echarts-4 div{
            display: flex;
            height: 50px;
            justify-content: space-between;
        }
        .right main .echarts-4 div p:nth-child(1){
            flex: 1;
        }
        .right main .echarts-4 div:nth-child(1){
            border-bottom: 1px solid #f5f6fa;
        }
        
    </style>
</head>

<body>
    <div class="left">
        <aside>
            <p class="iconfont ">AdminLTE 3</p>
            <p class="iconfont ">Alexander Pierce</p>
            <p class="iconfont active-blue">Dashboard</p>
            <p class="iconfont ">Dashboard v1</p>
            <p class="iconfont ">Dashboard v2</p>
            <p class="iconfont active-white">Dashboard v3</p>
            <p class="iconfont ">Widgets</p>
            <p class="iconfont ">Charts</p>
            <p class="iconfont ">UI Elements</p>
            <p class="iconfont ">Forms</p>
            <p class="iconfont ">Tables</p>
        </aside>
    </div>
    <div class="right">
        <nav>
            <div class="nav-left">
                <span class="iconfont"></span>
                <span>Home</span>
                <span>Contact</span>
                <input type="text" placeholder="Search">
                <span class="iconfont"></span>
            </div>
            <div class="nav-right">
                <div>
                    <span class="iconfont "></span>
                    <div>3</div>
                </div>
                <div>
                    <span class="iconfont "></span>
                    <div>15</div>
                </div>
                <div>
                    <span class="iconfont "></span>
                </div>
            </div>
        </nav>
        <div class="bigname">
            <p>
                <span>Dashboard v3</span>
            </p>
            <p>
                <span>Home</span> / <span>Dashboard v3</span>
            </p>
        </div>
        <main>
            <div class="echarts-1"></div>
            <div class="echarts-2"></div>
            <div class="echarts-3">
                <p>
                    <span>Products</span>
                    <span class="iconfont ">1</span>
                    <span class="iconfont ">3</span>
                </p>
                <table>
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Sales</th>
                            <th>More</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <span class="iconfont ">12%</span>
                                <span></span>
                            </td>
                            <td class="iconfont "></td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
            <div class="echarts-4">
                <p>
                    <span>Online Store Overview</span>
                    <span class="iconfont ">1</span>
                    <span class="iconfont ">3</span>
                </p>
                <div>
                    <p class="iconfont ">刷新</p>
                    <p>
                        <span class="iconfont ">12%</span>
                        <span>CONVERSION RATE</span>
                    </p>
                </div>
                <div>
                    <p class="iconfont "></p>
                    <p>
                        <span class="iconfont ">12%</span>
                        <span>SALES RATE</span>
                    </p>
                </div>
            </div>
        </main>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script>

    // 1.创建并初始化一个echarts实例
    let con1 = document.querySelector('.echarts-1')
    // echarts.js文件会对外暴露一个echarts对象
    let e1 = echarts.init(con1)

    // 2.绘制图表
    e1.setOption({
        // 图表的标题
        title: {
            text: 'Online Store Visitors',
            // 标题居中
            // left: 'center'
        },
        // 图例显示,点击图例可以显示隐藏
        legend: {
            data: ['This Week', 'Last Week'],
            right: 10,
            top: 350,
        },
        // 坐标轴：x和y必须要同时出现
        xAxis: {
            // 设置数据的标识，有几个数据就设置几个
            data: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th']
        },
        yAxis: {
            type:"value",
            name: 'Visitors Over Time',
            // 调整纵坐标轴的数据分隔
            min:0,
            max:200,
            splitNumber:10,
            // 取消分隔线
            splitLine: {
                show: true
            }
        },
        // 数据系列
        series: [
            {
                // 数据名字
                name: 'This Week',
                type: 'line',
                data: [100,120,170,165,180,175,160],
                // 平滑曲线
                smooth: true,
                 // 折线的样式
                 itemStyle:{
                    normal:{
                        // 线以及实心圆点的颜色
                        color:'rgb(0, 123, 255)',
                    }
                }
            },
            {
                // 数据名字
                name: 'Last Week',
                type: 'line',
                data: [60,80,70,65,80,75,100],
                // 平滑曲线
                smooth: true,
                 // 折线的样式
                 itemStyle:{
                    normal:{
                        // 线以及实心圆点的颜色
                        color:'gainsboro',
                    }
                }
            }
        ]
    })

    // 1.创建并初始化一个echarts实例
    let con2 = document.querySelector('.echarts-2')
    // echarts.js文件会对外暴露一个echarts对象
    let e2 = echarts.init(con2)

    // 2.绘制图表
    e2.setOption({
        // 图表的标题
        title: {
            text: 'Sales',
            // 标题居中
            // left: 'center'
        },
        // 图例显示,点击图例可以显示隐藏
        legend: {
            data: ['This Year', 'Last Year'],
            right: 10,
            top: 350,
            itemWidth: 12,
            itemHeight: 12
        },
        // 坐标轴：x和y必须要同时出现
        xAxis: {
            // 设置数据的标识，有几个数据就设置几个
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: {
            type: 'value',
            name: 'Sales Over Time',
            min:0,
            max:3,
            splitNumber:3,
            // 取消分隔线
            splitLine: {
                show: true
            },
            axisLabel: {
                show: true,
                formatter: '${value}k'
            }
        },
        // 数据系列
        series: [
            {
                // 数据名字
                name: 'This Year',
                color:'rgb(0, 123, 255)',
                type: 'bar',
                data: [1,2,3,2.5,2.8,2.5,3]
            },
            {
                // 数据名字
                name: 'Last Year',
                color:'gainsboro',
                type: 'bar',
                data: [0.8,1.8,2.8,2,1.8,1.5,2]
            }
        ]
    })

    let data1=Mock.mock({
        "list|2":[
            {
            "name|+1":['Some Product','Another Product'],
            "price|0-100":1,
            "sales|0-20000":1
        }
    ]
    })
    function render(data) {
        console.log(111);
        document.querySelector('.echarts-3 table tbody').innerHTML=data.map((item)=>{
            return `
            <tr>
                            <td>${item['name']}</td>
                            <td>$${item['price']} USD</td>
                            <td>
                                <span class="iconfont ">12%</span>
                                <span>${item['sales']} Sold</span>
                            </td>
                            <td class="iconfont "></td>
                        </tr>
                    `
        }).join('')
    }
    console.log(data1.list);
    render(data1.list)
    
</script>